Color Palette

Primary Colors

Primary

#0C8776

Success

#10B981

Warning

#F59E0B

Danger

#EF4444

Info

#3B82F6

Buttons

Button Variants

Primary Button Outline Button Danger Button (Soft) Red Button (Solid)

Buttons with Icons

Add New Export Delete

Button Sizes

Small Button Normal Button

Button States

Normal Disabled Loading

Badges & Status Indicators

Badge Variants

Success Warning Danger Info Neutral Primary

Badges with Dot Indicators

Active Pending Inactive Processing

Form Elements

Text Input

Employee Name Enter the employee's full name

Select Dropdown

Department Select department Engineering Sales Marketing

Textarea

Description

Checkbox & Radio

Remember me

Admin

Employee

Tables

Enhanced Table

Employee	Department	Date	Status	Actions
John Doe	Engineering	2026-01-02	Present	Edit
Jane Smith	Marketing	2026-01-02	On Leave	Edit
Mike Johnson	Sales	2026-01-02	Absent	Edit

Pagination

Showing 1-10 of 50

Previous 1 2 3 Next

Alerts

Success!

Your changes have been saved successfully.

×

Warning

Your session will expire in 5 minutes.

×

Error

Something went wrong. Please try again.

×

Information

Report data is updated every 15 minutes.

×

Progress Bars

Task Completion 75%

Employee Onboarding 90%

Report Processing 45%

Empty State

No tasks assigned

You currently have no tasks assigned to you. Check back later or contact your manager.

View All Tasks

Loading States

Spinner

Skeleton Loaders

Avatars

Avatar Sizes

JD

JD

JD

Avatar Group

JD

JS

MJ

SW

+3

Cards

Basic Card

This is a basic card with a header and body. Perfect for displaying grouped content.

Card with Footer

This card includes a footer section for actions or additional information.

Action Cancel